{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{$xm.title.val}-{$seo_title}</title>
    <include file="Index:meta" />
    <!-- Swiper -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
</head>

<body>
    <div id="page">
        <!-- Header -->
        <include file="Index:header" />
        <!-- Header End -->

        <!-- 项目列表 start -->
        <section class="search container pt-40 mb-40" style="min-height:50vh;">

           

                <div class="search-input clearfix mb-40">
                    <a data-toggle="dropdown" id='searchtype'>素材</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="###">岗位</a></li>
                        <li><a href="###">项目</a></li>
                        <li><a href="###">课件</a></li>
                        <li><a href="###">素材</a></li>
                    </ul>
                    <span class="search-btn" id='searchbutton'></span>
                    <input type="text" value="{$title}" id='searchtitle' name="title">
                    <input type="hidden" id='searchtypepost' name='searchtypepost'>
                </div>
        


            <div class="mb-20 major-list zhuanyetype pt-40">
                <span data-zyid="all" class="zhuanye active">全部</span>
                <volist name="zhuanyelist" id="vo">
                    <span data-zyid="{$vo.id}" <if condition="$zyid eq $vo['id'] ">class="zhuanye active"
                        <else /> class="zhuanye"</if> >{$vo.title}</span>
                </volist>
            </div>

            <div class="search-box">
                <div class="major-list mb-20 sucaitype">
                    <a class="active" data-filter="pic">图片素材</a>
                    <a data-filter="video">视频素材</a>
                    <a data-filter="other">其他素材</a>
                </div>

                <p class="mb-20 tongji">找到 <span class="text-primary">{$totalnum}</span> 个<span id="searchtypehtml"></span>。</p>

                <ul class="mb-40" id="gwxmkc">
                </ul>
                <div class="card-group clearfix mb-20 imgbox" id="pic" style="display: none;">
                    <h2 class="con-title mb-20">图片素材</h2>
                    <div class="row" id="imgul">
                        <!-- 项目列表 块  start -->

                        <!-- 项目列表 块  end -->
                    </div>
                </div>

                <!-- 图片显示 -->
                <div class="modal fade" id="lightimg">
                    <div class="modal-dialog">
                        <div class="modal-content clearfix">
                            <div class="col-md-9 image">
                                <button class="controller prev show">
                                    <i class="icon icon-chevron-left"></i>
                                </button>
                                <button class="controller next show">
                                    <i class="icon icon-chevron-right"></i>
                                </button>
                                <img id="lightimgSrc" src="">
                            </div>
                            <div class="col-md-3 content">
                                <h4 id="lightimgTitle" class="mb-20">图片名称</h4>
                                <p id="lightimgContent" class="mb-60"></p>
                                <div class="text-right">
                                    <eq name="download" value="1">
                                        <a download class="btn btn-block btn-primary" id="lightimgDown">下载</a>
                                    </eq>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-group clearfix" id="video" style="display: none;">
                    <h2 class="con-title mb-20">视频素材</h2>
                    <div class="list-down row">
                        <ul id="mp4ul">

                        </ul>
                    </div>
                </div>

                <div class="card-group clearfix" id="other" style="display: none;">
                    <h2 class="con-title mb-20">其他素材</h2>
                    <div class="list-down row">
                        <ul id="otherul">

                        </ul>
                    </div>
                </div>

            </div>
            <div class="pt-40 mb-20"><a class="btn-more center-block" data-p='1'>加载更多</a></div>
        </section>
        <include file="Index:footer" />
    </div>
     <i class="goTop"></i>
    <script>
        $(function () {
            $(".dropdown-menu").on("click", "a", function () {
                console.log($(this).html())
                $(".search-input > a").html($(this).html());
            })

            $("[data-filter]").on("click", function () {
                $("[data-filter]").removeClass("active");
                $(this).addClass("active");

                var id = $(this).attr("data-filter");
                if (id == "all") {
                    $(".card-group").removeClass("none");
                } else {
                    $(".card-group").addClass("none");
                    $("#" + id).removeClass("none");
                }
            })


            imgbox = $(".imgbox");
            imgbox.on("click", "[data-image]", function () {
                var that = $(this);
                index = that.parents(".card-box").index();

                lightImg(index)
                $('#lightimg').modal({
                    position: 'fit',
                    show: true
                });
            })
            function lightImg(num) {
                if (num == 0) {
                    if (imgbox.find("[data-image]").length - 1 == 0) {
                        $("#lightimg .controller").removeClass("show");
                    } else {
                        $("#lightimg .controller.prev").removeClass("show");
                        $("#lightimg .controller.next").addClass("show");
                    }
                } else if (num == imgbox.find("[data-image]").length - 1) {
                    $("#lightimg .controller.prev").addClass("show");
                    $("#lightimg .controller.next").removeClass("show");
                } else {
                    $("#lightimg .controller.prev").addClass("show");
                    $("#lightimg .controller.next").addClass("show");
                }

                var o = imgbox.find(".card-box").eq(num).find("img");
                $("#lightimgSrc").attr("src", o.data("image"));
                $("#lightimgTitle").html(o.data("title"));
                // $("#lightimgTime").html(o.data("time"));
                $("#lightimgContent").html(o.data("content"));
                //$("#lightimgDown").attr("href", o.attr("src"));
                if (o.data("fileonoff")) {
                    $("#lightimgDown").attr("href", o.data("image"));
                    $("#lightimgDown").removeAttr("disabled").removeClass("btn-disabled").removeClass("disabled").addClass("btn-primary");
                } else {
                    $("#lightimgDown").attr("href", "");
                    $("#lightimgDown").attr("disabled", "").addClass("btn-disabled").addClass("disabled").removeClass("btn-primary");
                }
            }
            $("#lightimg").on("click", ".prev", function () {
                index--;
                lightImg(index);
            })
            $("#lightimg").on("click", ".next", function () {
                index++;
                lightImg(index);
            })

        })

    </script>

    <script>
        $(function () {
            var i = 1;
            $("#searchbutton").on("click", function () {  //点击搜索
                var sno = $("#searchtitle").val();
                if (sno.indexOf(" ") >= 0 || sno == null) {
                    alert('请输入搜索内容');
                    return false;
                }
                $("#searchtypepost").val($("#searchtype").html());
                var cat = $(".zhuanyetype  .active").data('zyid'); //获取专业分类id
                var ad = $(".sucaitype .active").data('filter');//获取素材分类id
                $('.btn-more').attr("data-p", 1);
                var sctp = $("#searchtype").html(); //搜索的分类
                var title = $("#searchtitle").val(); //搜索的标题
                if (sctp != '素材') {
                    qingkongqk();
                    $("#gwxmkc").show();
                    $(".btn-more").hide();
                } else {
                    qingkongqk();
                    if ($(".sucaitype .active").data('filter') == 'pic') {
                        $("#pic").show();
                    } else if ($(".sucaitype .active").data('filter') == 'video') {
                        $("#video").show();
                    } else if ($(".sucaitype .active").data('filter') == 'other') {
                        $("#other").show();
                    }
                    $(".btn-more").show();
                    $(".btn-more").html('加载更多');
                }
                refreshlist(cat, ad, 1, title, sctp);
            })
            $('.zhuanyetype span').on('click', function () {  //专业点击
                var ac = $(this).data('zyid'); //获取专业id
                $(".zhuanyetype span").removeClass("active"); //设置专业焦点
                $(this).addClass("active");//设置专业焦点 
                var ad = $(".sucaitype .active").data('filter');//获取素材分类id
                var sctp = $("#searchtype").html(); //搜索的分类
                var title = $("#searchtitle").val(); //搜索的标题
                $('.btn-more').attr("data-p", 1); //分页重置1
                $(".btn-more").html('加载更多');
                qingkongqk();
                refreshlist(ac, ad, '1', title, sctp);
            })

            $('.sucaitype a').on('click', function () {   //类型点击
                var cd = $(this).data('filter');
                qingkongqk();
                if (cd == 'image') {
                    $("#pic").show();
                } else if (cd == 'video') {
                    $("#video").show();
                } else if (cd == 'qita') {
                    $("#other").show();
                }
                $('.btn-more').attr("data-p", i); //分页重置1
                $(".sucaitype a").removeClass("active"); //素材分类设置焦点
                $(this).addClass("active");//素材分类设置焦点
                var cat = $('.zhuanyetype .active').data('zyid'); //获取专业分类id
                var sctp = $("#searchtype").html(); //搜索的分类
                var title = $("#searchtitle").val(); //搜索的标题
                $('.btn-more').attr("data-p", 1); //分页重置1
                $(".btn-more").html('加载更多');
                refreshlist(cat, cd, 1, title, sctp);
            })
            $('.btn-more').on('click', function () {  //加载更多
                i = parseInt($('.btn-more').attr("data-p"));
                i = i + 1;
                var cat = $(".zhuanyetype  .active").data('zyid');
                $('.btn-more').attr("data-p", i);
                var sctp = $("#searchtype").html(); //搜索的分类
                var title = $("#searchtitle").val(); //搜索的标题
                var adty = $(".sucaitype .active").data('filter');
                refreshlist(cat, adty, i, title, sctp);
            })

            function qingkongqk() {  //清空区块
                $("#otherul").html('');//清空其它素材
                $("#other").hide(); //隐藏其它素材
                $("#mp4ul").html('');//清空视频素材
                $("#video").hide(); //隐藏视频
                $("#imgul").html(''); //清空图片区块
                $("#pic").hide(); //隐藏图片区块
                $("#gwxmkc").html('');//清空岗位
                $("#gwxmkc").hide();//隐藏岗位
            }
        })
        var modal_a = "javascript:(new $.zui.ModalTrigger({icon:'info-sign', title:'系统提示',custom:'尊敬的用户：你没有权限观看本内容，请登录相应的权限账号。' })).show();"
        function refreshlist(zy, zyty, p, title, sctype) {
            $.ajax({
                type: "POST",
                url: "index.php?g=Home&m=Index&a=getsucai",
                data: "zyid=" + zy + "&playtype=" + zyty + "&page=" + p + "&title=" + title + "&sctype=" + sctype,
                dataType: "json",
                success: function (resp) {
                    if(resp.data && resp.data == false ){
                        $(".btn-more").html('没有更多');
                    }else{
                        $(".btn-more").html('加载更多');
                    }
                    // if(resp.gxk && resp.gxk == false ){
                    //     $(".btn-more").html('没有更多');
                    // }else{
                    //     $(".btn-more").html('加载更多');
                    // }


                    if (resp.data) {
                        var download = '{$download}' ;
                        if (typeof resp.data.qita != "undefined") {
                            var strqita = '';
                            
                            $.each(resp.data.qita, function (k1, item1) {
                                strqita += '<li><div class="row">';
                                if (download == 1) {
                                    if (item1.isok == true) {
                                        strqita += '<a class="icon icon-down" download="' + item1.filename + '" href="http://hgedu.fjhgkj.com' + item1.filepath + '" title="' + item1.filename + '"></a>';
                                    } else {
                                        strqita += '<a class="icon icon-down disabled" title="需下载申请"></a>';
                                    }
                                }
                                
                                strqita += '<p class="title text-ellipsis" title="' + item1.filename + '">' + item1.filename + '</p></div></li>';
                            });
                            if (p == 1) {
                                $("#otherul").html(strqita);
                            } else {
                                $("#otherul").append(strqita);
                            }
                            $("#other").show(); //显示区块
                        }

                        if (typeof resp.data.img != "undefined") {
                            var strimg = '';
                            $.each(resp.data.img, function (k2, item2) {
                                strimg += '<div class="card-box"><div class="card-box-content"><div class="card-img"><img data-image="http://hgedu.fjhgkj.com' + item2.filepath + '" ';
                                if (item2.isok == true) {
                                    strimg += 'data-fileonoff="true" ';
                                } else {
                                    strimg += 'data-fileonoff="false" ';
                                }
                                strimg += 'data-title="' + item2.filename + '" data-content="建课人：' + item2.username + '" src="__PUBLIC__/dist/image/img.jpg" data-src="http://hgedu.fjhgkj.com' + item2.filepath + '"  title="' + item2.filename + '"></div></div></div>';
                            });
                            if (p == 1) {
                                $("#imgul").html(strimg);
                            } else {
                                $("#imgul").append(strimg);
                            }
                            $("#pic").show();
                            srcollLoadImg(function ($obj) {
                                var $img = $obj;
                                //比例
                                var h = $img.width() / (280 / 160) + "px";
                                $img.height(h);

                                console.log(1233)
                            });
                        }

                        if (typeof resp.data.mp4 != "undefined") {
                            var strmp4 = '';
                            $.each(resp.data.mp4, function (k3, item3) {
                                strmp4 += '<li><div class="row">';
                                if (download == 1) {
                                    if (item3.isok == true) {
                                        strmp4 += '<a class="icon icon-down" download="' + item3.filename + ' href="index.php?m=Index&a=video&file=http://hgedu.fjhgkj.com' + item3.filepath + '" title="点击下载"></a>';
                                        strmp4 += '<a href="index.php?m=Index&a=video&file=http://hgedu.fjhgkj.com' + item3.filepath + '" target="_blank" title="点击观看">';
                                    } else {
                                        strmp4 += '<a class="icon icon-down disabled" title="需下载申请"></a>';
                                        strmp4 += '<a href="' + modal_a + '" title="' + item3.filename + '"> ';
                                    }
                                    strmp4 += '<p class="title text-ellipsis">' + item3.filename + '</p></a></div></li>';
                                }
                            });
                            $("#video").show();
                            if (p == 1) {
                                $("#mp4ul").html(strmp4);
                            } else {
                                $("#mp4ul").append(strmp4);
                            }
                        }
                        $(".tongji").show();//显示统计
                        $(".text-primary").html(resp.total);//输出统计结果
                        $("#searchtypehtml").html($('.sucaitype .active').html()); //输出统计类型
                        $(".zhuanyetype").show(); //显示专业分类
                        $(".sucaitype").show(); //显示素材分类
                    } else if (resp.gxk) {
                        var strgxk = '';
                        $.each(resp.gxk, function (k5, item5) {
                            strgxk += '<li class="clearfix">';
                            if (sctype == '岗位') {
                                strgxk += '<a href="index.php?m=Index&a=major&pid=' + item5.zyid + '&cid=' + item5.id + '">';
                            } else if (sctype == '项目') {
                                strgxk += '<a href="index.php?m=Index&a=details&pid=' + item5.zhuanyeid + '&cid=' + item5.gwid + '&oid=' + item5.id + '">';
                            } else if (sctype == '课件') {
                                if (item5.abc == true) {
                                    strgxk += '<a href="index.php?m=Index&a=detailsplay&' + item5.type + '=' + item5.id + '&file=' + item5.filepath + '&title=' + encodeURIComponent(item5.title) + '">';
                                } else {
                                    strgxk += '<a href="' + modal_a + '" title="' + item5.title + '">';
                                }
                            }
                            if (sctype == '岗位') {
                                strgxk += '<div class="col-sm-9 col-xs-7 text-ellipsis title">' + item5.title + '</div>';
                            } else {
                                strgxk += '<div class="col-sm-3 col-xs-7 text-ellipsis title">' + item5.title + '</div>';
                            }
                            if (sctype == '岗位' || sctype == '项目') {
                                strgxk += '<div class="col-sm-4 text-ellipsis hide-sm">' + item5.zhuanyename + '</div>';
                            }
                            if (sctype == '岗位') {
                                strgxk += '<div class="col-sm-2 text-ellipsis hide-sm"> 总项目数：' + item5.totalxm + '</div>';
                            } else if (sctype == '项目') {
                                strgxk += '<div class="col-sm-2 text-ellipsis hide-sm"> 总课件数：' + item5.totalxm + '</div>';
                            }
                            strgxk += '<div class="col-sm-3 text-ellipsis col-xs-5">建课人：' + item5.username + '</div></a></li>';
                        });
                        if (p == 1) {
                            $("#gwxmkc").html(strgxk);
                        } else {
                            $("#gwxmkc").append(strgxk);
                        }
                        $(".tongji").show();//显示统计
                        $(".text-primary").html(resp.gxk.length);//输出统计结果
                        $("#searchtypehtml").html($("#searchtype").html()); //输出统计类型
                        $(".zhuanyetype").hide();
                        $(".sucaitype").hide();
                    }

                }
            });
        }

        var pid = '{$pid}' ;
        if(pid != ''){
            $(".zhuanyetype span").removeClass("active"); //设置专业焦点
            
            $("[data-zyid]").each(function(index,element){
                if($(element).attr("data-zyid") == pid){
                    $(element).addClass("active");   // 只是样式选中
                }
            })
            refreshlist(pid, 'pic', '1', '', '素材');
        }else{
            refreshlist('all', 'pic', '1', '', '素材');
        }
    </script>

</body>

</html>